<template>
	<view class="memo-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		
		<!-- 自定义标题栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<text class="navbar-title">备忘录</text>
				<view class="navbar-right">
					<view class="add-btn" @click="addMemo">
						<text class="add-icon">+</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 统计信息 -->
		<view class="stats-bar">
			<text class="stats-text">共 {{ dataList.length }} 条记录</text>
		</view>
		
		<!-- 备忘录列表 -->
		<scroll-view class="memo-list" scroll-y="true" @scrolltolower="loadMore">
			<!-- 空状态 -->
			<view v-if="dataList.length === 0" class="empty-state">
				<text class="empty-text">暂无备忘录，点击右下角添加</text>
			</view>
			
			<!-- 备忘录网格 -->
			<view v-else class="memo-grid">
				<view 
					class="memo-card" 
					v-for="item in dataList" 
					:key="item.id"
					@click="itemClick(item)"
				>
					<view class="memo-content">
						<text class="memo-title">{{ item.title || '未命名备忘录' }}</text>
						<text class="memo-desc">{{ item.desc || '暂无内容...' }}</text>
						<text class="memo-time">{{ formatTime(item.add_time) }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore && dataList.length > 0">
				<text class="load-text">正在加载更多...</text>
			</view>
			
					<!-- 底部占位 -->
		<view class="bottom-space"></view>
	</scroll-view>
	
	<!-- 悬浮加号按钮 -->
	<view class="floating-add-btn" @click="addMemo">
		<view class="add-btn-icon">
			<text class="add-plus">+</text>
		</view>
	</view>

</view>
</template>

<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			dataList: [],
			hasMore: true,
			currentPage: 1,
			pageSize: 50, // 增加每页显示数量，确保能显示所有备忘录
			statusBarHeight: 0
		}
	},
	onLoad(op) {
		console.log('首页onLoad开始')
		
		// 使用优化的状态栏高度获取方法
		this.getStatusBarHeight();
		
		try {
			console.log('开始加载数据')
			this.loadData();
		} catch (error) {
			console.error('首页onLoad出错:', error)
			// 出错时显示提示
			uni.showToast({
				title: '页面加载失败',
				icon: 'none'
			});
		}
	},
	onShow() {
		// 检查登录状态
		if (!this.checkLoginStatus()) {
			return; // 如果未登录则直接返回，不刷新数据
		}
		// 从其他页面返回时刷新数据
		this.refreshData();
	},
	methods: {
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			// 微信小程序需要特殊处理
			if (statusBarHeight === 0) {
				statusBarHeight = 25; // 微信小程序默认状态栏高度
			}
			// 确保最小高度，避免文字被遮挡
			statusBarHeight = Math.max(statusBarHeight, 22);
			console.log('微信小程序状态栏高度:', statusBarHeight);
			// #endif
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			// H5环境不需要状态栏
			statusBarHeight = 0;
			// #endif
			
			// #ifdef APP-PLUS
			// APP环境使用原始高度
			statusBarHeight = statusBarHeight || 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		checkLoginStatus() {
			// 检查登录状态
			if (!localStorage.isLoggedIn()) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}
				});
				return false;
			}
			return true;
		},
		
		loadData() {
			console.log('开始加载备忘录数据')
			
			try {
				// 直接获取当前用户的所有备忘录，和列表页保持一致
				const currentUser = localStorage.getCurrentUser()
				if (currentUser) {
					const allMemos = localStorage.getUserMemos(currentUser.id)
					
					// 按重要性和时间排序，与列表页保持一致
					const sortedMemos = allMemos.sort((a, b) => {
						// 重要的排在前面
						if (a.important && !b.important) return -1
						if (!a.important && b.important) return 1
						// 时间降序
						return new Date(b.createTime) - new Date(a.createTime)
					})
					
					this.dataList = sortedMemos.map(item => ({
						...item,
						desc: this.stripHtml(item.content).substring(0, 40) + (this.stripHtml(item.content).length > 40 ? '...' : ''),
						add_time: item.createTime
					}));
					
					this.hasMore = false; // 一次性加载所有数据，不需要分页
					console.log('数据加载成功，条数：', this.dataList.length)
				} else {
					this.dataList = []
					this.hasMore = false
				}
			} catch (error) {
				console.error('加载数据出错:', error)
				// 出错时显示测试数据
				this.dataList = [
					{
						id: 1,
						title: '测试备忘录',
						desc: '数据加载出错，这是测试数据',
						add_time: new Date().toISOString()
					}
				];
				this.hasMore = false;
			}
		},
		
		// 去除HTML标签的工具函数
		stripHtml(html) {
			if (!html) return '';
			return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').trim();
		},
		
		loadMore() {
			if (this.hasMore) {
				this.currentPage++;
				this.loadData();
			}
		},
		
		refreshData() {
			// 直接重新加载所有数据
			this.loadData();
		},
		
		itemClick(item) {
			uni.navigateTo({
				url: '/pages/subPack/index/detail?id=' + item.id + '&title=' + encodeURIComponent(item.title || '备忘录详情')
			});
		},
		
		addMemo() {
			// 检查登录状态
			if (!this.checkLoginStatus()) {
				return;
			}
			
			// 添加触觉反馈
			uni.vibrateShort({
				type: 'light'
			});
			
			// 跳转到编辑页面
			uni.navigateTo({
				url: '/pages/subPack/index/edit',
				fail: (err) => {
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		},
		
		formatTime(time) {
			if (!time) return '';
			const date = new Date(time);
			const now = new Date();
			const diff = now - date;
			
			if (diff < 60000) return '刚刚';
			if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前';
			if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前';
			if (diff < 604800000) return Math.floor(diff / 86400000) + '天前';
			
			return date.toLocaleDateString();
		}
	}
}
</script>

<style lang="scss" scoped>
.memo-container {
	width: 100%;
	min-height: 100vh;
	background: #f8f9fa;
}

.status-bar {
	background: #6c5ce7;
}

.custom-navbar {
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	/* #ifdef MP-WEIXIN */
	padding: 24rpx 30rpx 16rpx 30rpx;
	/* #endif */
	/* #ifdef APP-PLUS */
	padding: 20rpx 30rpx;
	/* #endif */
	/* #ifdef H5 */
	padding: 20rpx 30rpx;
	/* #endif */
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: bold;
	color: white;
	/* #ifdef MP-WEIXIN */
	line-height: 1.2;
	margin-top: 2rpx;
	/* #endif */
}

.navbar-right {
	display: flex;
	align-items: center;
}

.add-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.add-icon {
	font-size: 32rpx;
	color: white;
	font-weight: bold;
}

.stats-bar {
	background: white;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #e8e8e8;
}

.stats-text {
	font-size: 26rpx;
	color: #666;
}

.memo-list {
	padding: 25rpx;
	padding-bottom: 120rpx;
	/* 确保列表容器不会超出屏幕 */
	width: 100%;
	box-sizing: border-box;
}

.empty-state {
	text-align: center;
	padding: 100rpx 40rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.memo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15rpx;
	/* 确保网格容器不会超出父容器 */
	width: 100%;
	box-sizing: border-box;
	
	/* 响应式布局优化 */
	@media (max-width: 600rpx) {
		gap: 12rpx;
	}
}

.memo-card {
	background: white;
	border-radius: 12rpx;
	padding: 18rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	min-height: 150rpx;
	border: 1rpx solid #e8e8e8;
	/* 确保卡片不会超出网格容器 */
	width: 100%;
	box-sizing: border-box;
	/* 添加最大宽度限制 */
	max-width: 100%;
	overflow: hidden;
	
	/* 响应式优化 */
	@media (max-width: 600rpx) {
		padding: 16rpx;
		min-height: 140rpx;
	}
}

.memo-card:active {
	transform: scale(0.98);
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

.memo-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* 确保内容不会超出卡片 */
	width: 100%;
	box-sizing: border-box;
}

.memo-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* 确保标题不会超出容器 */
	width: 100%;
	box-sizing: border-box;
}

.memo-desc {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
	flex: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-bottom: 12rpx;
	/* 确保描述文字不会超出 */
	word-break: break-all;
	word-wrap: break-word;
	/* 添加最大高度限制 */
	max-height: 108rpx; /* 3行文字的高度 24rpx * 1.5 * 3 */
}

.memo-time {
	font-size: 20rpx;
	color: #999;
	text-align: right;
	margin-top: auto;
	/* 确保时间不会被截断 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.load-more {
	text-align: center;
	padding: 40rpx 0;
}

.load-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.7);
}

.bottom-space {
	height: 120rpx;
}

/* 悬浮加号按钮样式 */
.floating-add-btn {
	position: fixed;
	right: 40rpx;
	bottom: 120rpx; /* 避免遮挡tabbar */
	z-index: 999;
	
	/* 入场动画 */
	animation: slideInUp 0.5s ease-out 0.3s both;
	
	/* 防止在小屏幕上位置过于靠边 */
	@media (max-width: 600rpx) {
		right: 30rpx;
		bottom: 110rpx;
	}
}

/* 入场动画 */
@keyframes slideInUp {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.add-btn-icon {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 50%, #fd79a8 100%);
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(108, 92, 231, 0.4);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	
	/* 添加边框增强视觉效果 */
	border: 2rpx solid rgba(255, 255, 255, 0.2);
	
	/* 背景动画效果 */
	position: relative;
	overflow: hidden;
	

}

.floating-add-btn:active .add-btn-icon {
	transform: scale(0.9);
	box-shadow: 0 4rpx 16rpx rgba(108, 92, 231, 0.6);
}

.floating-add-btn:hover .add-btn-icon {
	transform: translateY(-4rpx) scale(1.05);
	box-shadow: 0 12rpx 32rpx rgba(108, 92, 231, 0.5);
}

.add-plus {
	font-size: 48rpx;
	color: white;
	font-weight: 300;
	line-height: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	
	/* 确保加号居中 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48rpx;
	height: 48rpx;
}

/* 添加呼吸动画效果 */
@keyframes breathe {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 8rpx 24rpx rgba(108, 92, 231, 0.4);
	}
	50% {
		transform: scale(1.02);
		box-shadow: 0 12rpx 32rpx rgba(108, 92, 231, 0.5);
	}
}

.floating-add-btn .add-btn-icon {
	animation: breathe 3s ease-in-out infinite;
}

/* 点击涟漪效果 */
.floating-add-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
	opacity: 0;
	pointer-events: none;
}

.floating-add-btn:active::after {
	width: 160rpx;
	height: 160rpx;
	opacity: 1;
}


</style>